import { Component } from '../core/Component.js';

/**
 * 卡片组件
 */
export class Card extends Component {
  constructor(props = {}) {
    super(props);
    this.title = props.title || '';
    this.content = props.content || '';
    this.image = props.image || null; // 卡片顶部图片
    this.actions = props.actions || []; // 操作按钮数组
    this.elevation = props.elevation || 2; // 阴影深度 0-5
    this.padding = props.padding || '16px';
    this.clickable = props.clickable || false;
    
    // 事件处理函数
    this.onClick = props.onClick || null;
    
    this.style = props.style || {};
    this.children = []; // 子组件
  }

  /**
   * 设置标题
   * @param {string} title 新的标题
   */
  setTitle(title) {
    this.title = title;
    if (this.titleElement) {
      this.titleElement.textContent = title;
    }
  }

  /**
   * 设置内容
   * @param {string} content 新的内容
   */
  setContent(content) {
    this.content = content;
    if (this.contentElement) {
      this.contentElement.textContent = content;
    }
  }

  /**
   * 添加子组件
   * @param {Component} component 要添加的组件
   */
  addChild(component) {
    this.children.push(component);
    if (this.contentElement) {
      this.contentElement.appendChild(component.render());
    }
  }

  /**
   * 设置阴影深度
   * @param {number} elevation 阴影深度 0-5
   */
  setElevation(elevation) {
    this.elevation = Math.max(0, Math.min(5, elevation));
    if (this.element) {
      this.applyStyle();
    }
  }

  /**
   * 重写update方法，避免重新创建DOM元素
   */
  update() {
    if (this.element) {
      this.applyStyle();
      // 更新子组件
      this.children.forEach(child => {
        if (child.update) {
          child.update();
        }
      });
    }
  }

  /**
   * 获取阴影样式
   */
  getShadowStyle() {
    const shadows = [
      'none',
      '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
      '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
      '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
      '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
      '0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)'
    ];
    return shadows[this.elevation] || shadows[2];
  }

  applyStyle() {
    if (!this.element) return;
    
    // 基础样式
    this.element.style.borderRadius = '8px';
    this.element.style.overflow = 'hidden';
    this.element.style.transition = 'all 0.3s ease';
    this.element.style.position = 'relative';
    this.element.style.display = 'flex';
    this.element.style.flexDirection = 'column';
    this.element.style.boxShadow = this.getShadowStyle();
    
    // 主题样式
    if (this.theme && this.theme.mode) {
      if (this.theme.mode === 'dark') {
        this.element.style.backgroundColor = '#333';
        this.element.style.border = '1px solid #555';
        this.element.style.color = this.theme.textColor || '#ffffff';
      } else {
        this.element.style.backgroundColor = '#ffffff';
        this.element.style.border = '1px solid #e0e0e0';
        this.element.style.color = this.theme.textColor || '#333333';
      }
    } else {
      // 默认样式
      this.element.style.backgroundColor = '#ffffff';
      this.element.style.border = '1px solid #e0e0e0';
      this.element.style.color = '#333333';
    }
    
    // 可点击样式
    if (this.clickable || this.onClick) {
      this.element.style.cursor = 'pointer';
      
      this.element.onmouseenter = () => {
        this.element.style.transform = 'translateY(-2px)';
        this.element.style.boxShadow = this.getShadowStyle().replace(/rgba\(0,0,0,([^)]+)\)/g, 'rgba(0,0,0,$1)');
      };
      
      this.element.onmouseleave = () => {
        this.element.style.transform = 'translateY(0)';
        this.element.style.boxShadow = this.getShadowStyle();
      };
    }
    
    // 标题样式
    if (this.titleElement) {
      this.titleElement.style.fontSize = '20px';
      this.titleElement.style.fontWeight = 'bold';
      this.titleElement.style.margin = '0 0 8px 0';
      this.titleElement.style.color = 'inherit';
    }
    
    // 内容区域样式
    if (this.contentElement) {
      this.contentElement.style.flex = '1';
      this.contentElement.style.lineHeight = '1.5';
    }
    
    // 操作区域样式
    if (this.actionsElement) {
      this.actionsElement.style.padding = '8px 16px';
      this.actionsElement.style.borderTop = this.theme?.mode === 'dark' ? '1px solid #555' : '1px solid #e0e0e0';
      this.actionsElement.style.display = 'flex';
      this.actionsElement.style.gap = '8px';
      this.actionsElement.style.justifyContent = 'flex-end';
    }
    
    // 自定义样式（覆盖主题样式）
    for (const [key, value] of Object.entries(this.style)) {
      this.element.style[key] = value;
    }
  }

  /**
   * 创建图片元素
   */
  createImageElement() {
    if (!this.image) return null;
    
    const imageElement = document.createElement('img');
    imageElement.src = this.image;
    imageElement.style.width = '100%';
    imageElement.style.height = '200px';
    imageElement.style.objectFit = 'cover';
    imageElement.style.display = 'block';
    
    return imageElement;
  }

  /**
   * 创建内容区域
   */
  createContentArea() {
    const contentArea = document.createElement('div');
    contentArea.style.padding = this.padding;
    
    // 添加标题
    if (this.title) {
      this.titleElement = document.createElement('h3');
      this.titleElement.textContent = this.title;
      contentArea.appendChild(this.titleElement);
    }
    
    // 添加内容
    this.contentElement = document.createElement('div');
    if (this.content) {
      this.contentElement.textContent = this.content;
    }
    
    // 添加子组件
    this.children.forEach(child => {
      this.contentElement.appendChild(child.render());
    });
    
    contentArea.appendChild(this.contentElement);
    
    return contentArea;
  }

  /**
   * 创建操作区域
   */
  createActionsArea() {
    if (!this.actions || this.actions.length === 0) return null;
    
    this.actionsElement = document.createElement('div');
    
    this.actions.forEach(action => {
      const button = document.createElement('button');
      button.textContent = action.text || '操作';
      button.style.padding = '6px 12px';
      button.style.border = 'none';
      button.style.borderRadius = '4px';
      button.style.cursor = 'pointer';
      button.style.fontSize = '14px';
      button.style.transition = 'all 0.2s ease';
      
      // 按钮样式
      if (action.primary) {
        button.style.backgroundColor = this.theme?.primaryColor || '#4285f4';
        button.style.color = '#ffffff';
      } else {
        button.style.backgroundColor = 'transparent';
        button.style.color = this.theme?.primaryColor || '#4285f4';
        button.style.border = `1px solid ${this.theme?.primaryColor || '#4285f4'}`;
      }
      
      // 悬停效果
      button.onmouseenter = () => {
        button.style.opacity = '0.8';
      };
      button.onmouseleave = () => {
        button.style.opacity = '1';
      };
      
      // 绑定点击事件
      if (action.onClick) {
        button.addEventListener('click', (event) => {
          event.stopPropagation(); // 防止触发卡片点击事件
          action.onClick.call(this, event);
        });
      }
      
      this.actionsElement.appendChild(button);
    });
    
    return this.actionsElement;
  }

  render() {
    this.element = document.createElement('div');
    
    // 添加图片（如果有）
    const imageElement = this.createImageElement();
    if (imageElement) {
      this.element.appendChild(imageElement);
    }
    
    // 添加内容区域
    const contentArea = this.createContentArea();
    this.element.appendChild(contentArea);
    
    // 添加操作区域（如果有）
    const actionsArea = this.createActionsArea();
    if (actionsArea) {
      this.element.appendChild(actionsArea);
    }
    
    // 绑定点击事件
    if (this.onClick) {
      this.element.addEventListener('click', (event) => {
        this.onClick.call(this, event);
      });
    }
    
    this.applyStyle();
    return this.element;
  }
} 